<!--  -->
<template>
	<view class="container">
		<!-- 兑换记录列表 -->
		<view class="records-section">
			<view class="record-item" v-for="(record, index) in exchangeRecords" :key="index">
				<view class="record-header">
					<view class="item-info">
						<text class="item-name">{{ record.itemName }}</text>
						<view class="status-tag" :class="record.status">{{ record.statusText }}</view>
					</view>
					<view class="status-icon">{{ record.statusIcon }}</view>
				</view>
				
				<view class="record-details">
					<view class="detail-row">
						<view class="detail-item">
							<text class="detail-icon">📅</text>
							<text class="detail-label">兑换时间</text>
							<text class="detail-value">{{ record.exchangeTime }}</text>
						</view>
					</view>
					
					<view class="detail-row">
						<view class="detail-item">
							<text class="detail-icon">⏰</text>
							<text class="detail-label">消耗积分</text>
							<text class="detail-value points">{{ record.points }}点</text>
						</view>
					</view>
					
					<view class="detail-row">
						<view class="detail-item">
							<text class="detail-icon">#</text>
							<text class="detail-label">快递单号</text>
							<text class="detail-value tracking">{{ record.trackingNumber }}</text>
						</view>
					</view>
				</view>
				
				<view class="record-footer">
					<view class="status-message">
						<text class="message-icon">{{ record.messageIcon }}</text>
						<text class="message-text">{{ record.statusMessage }}</text>
					</view>
					<view v-if="record.showLogistics" class="logistics-btn" @click="viewLogistics(record)">
						查看物流
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态提示 -->
		<view v-if="exchangeRecords.length === 0" class="empty-state">
			<text class="empty-icon">📦</text>
			<text class="empty-text">暂无兑换记录</text>
			<text class="empty-desc">快去兑换心仪的环保商品吧</text>
		</view>

		<!-- 物流详情弹窗 -->
		<view v-if="showLogisticsModal" class="logistics-modal" @click="closeLogisticsModal">
			<view class="modal-content" @click.stop>
				<!-- 弹窗头部 -->
				<view class="modal-header">
					<text class="modal-title">物流详情</text>
					<view class="close-btn" @click="closeLogisticsModal">×</view>
				</view>
				
				<!-- 快递信息 -->
				<view class="express-info">
					<view class="tracking-number">
						<text class="label">快递单号：</text>
						<text class="value">{{ currentRecord.trackingNumber }}</text>
					</view>
					<view class="express-company">
						<text class="label">快递公司：</text>
						<text class="value">{{ currentRecord.expressCompany }}</text>
					</view>
				</view>
				
				<!-- 地图区域 -->
				<view class="map-section">
					<view class="map-container">
						<!-- 真实地图组件 -->
						<map 
							id="logisticsMap"
							class="real-map"
							:latitude="mapCenter.latitude"
							:longitude="mapCenter.longitude"
							:scale="mapScale"
							:markers="mapMarkers"
							:polyline="mapPolyline"
							:show-location="true"
							:enable-zoom="true"
							:enable-scroll="true"
							:enable-rotate="true"
							@markertap="onMarkerTap"
							@regionchange="onRegionChange"
						>
							<!-- 地图覆盖物 -->
							<cover-view class="map-overlay">
								<cover-view class="route-info">
									<cover-view class="route-distance">距离: {{ routeDistance }}</cover-view>
									<cover-view class="route-time">预计: {{ routeTime }}</cover-view>
								</cover-view>
							</cover-view>
						</map>
						
						<!-- 地图控制按钮 -->
						<view class="map-controls">
							<view class="control-btn" @click="resetMapView" title="重置视图">
								<text class="control-icon">📍</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 物流信息区域 -->
				<view class="logistics-info">
					<text class="section-title">物流信息</text>
					<view class="logistics-timeline">
						<view class="timeline-item" v-for="(item, index) in currentRecord.logisticsSteps" :key="index" :class="{ active: item.active }">
							<view class="timeline-dot"></view>
							<view class="timeline-content">
								<text class="timeline-time">{{ item.time }}</text>
								<text class="timeline-desc">{{ item.description }}</text>
								<text class="timeline-location">{{ item.location }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 地址信息 -->
				<view class="address-info">
					<view class="address-item">
						<view class="address-header">
							<text class="address-icon">📤</text>
							<text class="address-title">发货地址</text>
						</view>
						<text class="address-detail">{{ currentRecord.senderAddress.address }}</text>
					</view>
					<view class="address-item">
						<view class="address-header">
							<text class="address-icon">📥</text>
							<text class="address-title">收货地址</text>
						</view>
						<text class="address-detail">{{ currentRecord.receiverAddress.address }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showLogisticsModal: false,
			currentRecord: {},
			exchangeRecords: [
				{
					itemName: '环保购物袋',
					status: 'shipped',
					statusText: '已发货',
					statusIcon: '🚚',
					exchangeTime: '2024-01-15',
					points: 50,
					trackingNumber: 'SF1234567890',
					statusMessage: '商品已发货,请耐心等待',
					messageIcon: '📦',
					showLogistics: true,
					expressCompany: '顺丰速运',
					senderAddress: {
						address: '广东省深圳市南山区科技园南区科苑路科兴科学园B栋3单元',
						latitude: 22.5405,
						longitude: 113.9344
					},
					receiverAddress: {
						address: '北京市朝阳区建国门外大街1号国贸大厦A座',
						latitude: 39.9042,
						longitude: 116.4074
					},
					logisticsSteps: [
						{
							time: '2024-01-15 14:30',
							description: '快件已签收',
							location: '北京市朝阳区建国门外大街1号国贸大厦A座',
							active: true
						},
						{
							time: '2024-01-15 09:15',
							description: '快件正在派送中',
							location: '北京市朝阳区建国门外大街1号国贸大厦A座',
							active: false
						},
						{
							time: '2024-01-15 08:30',
							description: '快件已到达派送点',
							location: '北京市朝阳区建国门外大街1号国贸大厦A座',
							active: false
						},
						{
							time: '2024-01-14 20:45',
							description: '快件运输中',
							location: '北京市朝阳区建国门外大街1号国贸大厦A座',
							active: false
						},
						{
							time: '2024-01-14 16:20',
							description: '快件已发出',
							location: '广东省深圳市南山区科技园南区科苑路科兴科学园B栋3单元',
							active: false
						}
					]
				},
				{
					itemName: '竹制水杯',
					status: 'completed',
					statusText: '已完成',
					statusIcon: '✅',
					exchangeTime: '2024-01-10',
					points: 80,
					trackingNumber: 'SF0987654321',
					statusMessage: '兑换已完成,感谢您的支持',
					messageIcon: '✅',
					showLogistics: false,
					expressCompany: '顺丰速运',
					senderAddress: {
						address: '浙江省杭州市西湖区文三路259号昌地火炬大厦',
						latitude: 30.2741,
						longitude: 120.1551
					},
					receiverAddress: {
						address: '上海市浦东新区陆家嘴环路1000号恒生银行大厦',
						latitude: 31.2304,
						longitude: 121.4737
					},
					logisticsSteps: []
				},
				{
					itemName: '植物种子包',
					status: 'delivering',
					statusText: '配送中',
					statusIcon: '📦',
					exchangeTime: '2024-01-05',
					points: 30,
					trackingNumber: 'SF5555666677',
					statusMessage: '商品正在配送中,即将到达',
					messageIcon: '📦',
					showLogistics: true,
					expressCompany: '顺丰速运',
					senderAddress: {
						address: '江苏省南京市江宁区科学园弘景大道99号',
						latitude: 31.9539,
						longitude: 118.8413
					},
					receiverAddress: {
						address: '广州市天河区珠江新城花城大道85号高德置地春广场',
						latitude: 23.1291,
						longitude: 113.2644
					},
					logisticsSteps: [
						{
							time: '2024-01-15 10:20',
							description: '快件运输中',
							location: '广州市天河区珠江新城花城大道85号高德置地春广场',
							active: true
						},
						{
							time: '2024-01-14 18:30',
							description: '快件已发出',
							location: '江苏省南京市江宁区科学园弘景大道99号',
							active: false
						}
					]
				}
			],
			// 地图相关数据
			mapCenter: { latitude: 39.9042, longitude: 116.4074 }, // 默认地图中心点
			mapScale: 16, // 默认缩放级别
			mapMarkers: [], // 标记点数组
			mapPolyline: null, // 路线数组
			routeDistance: '0km', // 距离
			routeTime: '0分钟', // 预计时间
			vehicleAnimationTimer: null, // 车辆动画定时器
		}
	},
	computed: {
		vehiclePositionStyle() {
			// 根据物流状态计算车辆位置
			if (this.currentRecord.status === 'delivering') {
				return {
					left: '60%',
					top: '40%'
				};
			} else if (this.currentRecord.status === 'shipped') {
				return {
					left: '80%',
					top: '60%'
				};
			}
			return {
				left: '20%',
				top: '20%'
			};
		}
	},
	methods: {
		// 查看物流
		viewLogistics(record) {
			this.currentRecord = record;
			this.showLogisticsModal = true;
			this.initMap(); // 初始化地图
		},
		
		// 关闭物流弹窗
		closeLogisticsModal() {
			this.showLogisticsModal = false;
			this.currentRecord = {};
			this.mapMarkers = []; // 清除标记点
			this.mapPolyline = null; // 清除路线
			this.routeDistance = '0km';
			this.routeTime = '0分钟';
			if (this.vehicleAnimationTimer) {
				clearInterval(this.vehicleAnimationTimer);
				this.vehicleAnimationTimer = null;
			}
		},

		// 初始化地图
		initMap() {
			// 设置地图中心点为起点和终点的中间位置
			const startLat = this.currentRecord.senderAddress.latitude;
			const startLng = this.currentRecord.senderAddress.longitude;
			const endLat = this.currentRecord.receiverAddress.latitude;
			const endLng = this.currentRecord.receiverAddress.longitude;
			
			// 计算中心点
			this.mapCenter = {
				latitude: (startLat + endLat) / 2,
				longitude: (startLng + endLng) / 2
			};
			
			// 计算距离
			const distance = this.calculateDistance(startLat, startLng, endLat, endLng);
			this.routeDistance = this.formatDistance(distance);
			
			// 计算预计时间（假设平均速度50km/h）
			const timeInHours = distance / (50 * 1000);
			this.routeTime = this.formatTime(timeInHours * 3600);
			
			// 生成完整的物流路线点（模拟真实路线）
			const routePoints = this.generateRoutePoints(startLat, startLng, endLat, endLng);
			
			// 设置地图标记点
			this.mapMarkers = [
				{
					id: 1,
					latitude: startLat,
					longitude: startLng,
					title: '发货地',
					width: 24,
					height: 24,
					callout: {
						content: '📍 发货地',
						color: '#ffffff',
						fontSize: 12,
						borderRadius: 4,
						bgColor: '#2196F3',
						padding: 8,
						display: 'ALWAYS'
					}
				},
				{
					id: 2,
					latitude: endLat,
					longitude: endLng,
					title: '收货地',
					width: 24,
					height: 24,
					callout: {
						content: '🏠 收货地',
						color: '#ffffff',
						fontSize: 12,
						borderRadius: 4,
						bgColor: '#4CAF50',
						padding: 8,
						display: 'ALWAYS'
					}
				}
			];
			
			// 添加车辆位置标记
			const vehiclePosition = this.calculateVehiclePosition(startLat, startLng, endLat, endLng, this.currentRecord.status);
			if (vehiclePosition) {
				this.mapMarkers.push({
					id: 3,
					latitude: vehiclePosition.latitude,
					longitude: vehiclePosition.longitude,
					title: '配送车辆',
					width: 28,
					height: 28,
					callout: {
						content: '🚗',
						color: '#ffffff',
						fontSize: 20,
						borderRadius: 4,
						bgColor: '#FF9800',
						padding: 6,
						display: 'ALWAYS'
					}
				});
			}
			
			// 设置完整的物流路线
			this.mapPolyline = [{
				points: routePoints,
				color: '#2196F3',
				width: 6,
				arrowLine: true,
				pattern: {
					width: 20,
					height: 20,
					pattern: [2, 2]
				}
			}];
			
			// 根据距离智能调整地图缩放级别，确保能看到完整路线
			if (distance > 1000000) { // 1000km以上
				this.mapScale = 6;
			} else if (distance > 500000) { // 500km以上
				this.mapScale = 7;
			} else if (distance > 200000) { // 200km以上
				this.mapScale = 8;
			} else if (distance > 100000) { // 100km以上
				this.mapScale = 9;
			} else if (distance > 50000) { // 50km以上
				this.mapScale = 10;
			} else if (distance > 20000) { // 20km以上
				this.mapScale = 11;
			} else if (distance > 10000) { // 10km以上
				this.mapScale = 12;
			} else if (distance > 5000) { // 5km以上
				this.mapScale = 13;
			} else {
				this.mapScale = 14;
			}
			
			// 启动车辆动画
			this.startVehicleAnimation();
		},
		
		// 计算两点间距离（米）
		calculateDistance(lat1, lng1, lat2, lng2) {
			const R = 6371000; // 地球半径（米）
			const dLat = this.deg2rad(lat2 - lat1);
			const dLng = this.deg2rad(lng2 - lng1);
			const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
				Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
				Math.sin(dLng / 2) * Math.sin(dLng / 2);
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			return R * c;
		},
		
		// 角度转弧度
		deg2rad(deg) {
			return deg * (Math.PI / 180);
		},
		
		// 格式化距离显示
		formatDistance(meters) {
			if (meters < 1000) {
				return `${Math.round(meters)}米`;
			} else {
				return `${(meters / 1000).toFixed(1)}公里`;
			}
		},
		
		// 格式化时间显示
		formatTime(seconds) {
			if (seconds < 60) {
				return `${seconds}秒`;
			} else if (seconds < 3600) {
				return `${Math.round(seconds / 60)}分钟`;
			} else {
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.round((seconds % 3600) / 60);
				return `${hours}小时${minutes}分钟`;
			}
		},



		// 重置地图视图
		resetMapView() {
			// 重新计算地图中心点
			const startLat = this.currentRecord.senderAddress.latitude;
			const startLng = this.currentRecord.senderAddress.longitude;
			const endLat = this.currentRecord.receiverAddress.latitude;
			const endLng = this.currentRecord.receiverAddress.longitude;
			
			this.mapCenter = {
				latitude: (startLat + endLat) / 2,
				longitude: (startLng + endLng) / 2
			};
			
			// 调整缩放级别
			const distance = this.calculateDistance(startLat, startLng, endLat, endLng);
			if (distance > 100000) {
				this.mapScale = 8;
			} else if (distance > 50000) {
				this.mapScale = 10;
			} else if (distance > 10000) {
				this.mapScale = 12;
			} else {
				this.mapScale = 14;
			}
			
			uni.showToast({
				title: '已重置地图视图',
				icon: 'none'
			});
		},

		// 标记点点击事件
		onMarkerTap(e) {
			const marker = e.marker;
			if (marker.getTitle()) {
				uni.showModal({
					title: marker.getTitle(),
					content: marker.getSnippet(),
					showCancel: false
				});
			}
		},

		// 地图区域变化事件
		onRegionChange(e) {
			// 可以在这里处理地图区域变化，例如调整缩放级别
			// console.log('地图区域变化:', e.type, e.center);
		},

		// 生成完整的物流路线点
		generateRoutePoints(startLat, startLng, endLat, endLng) {
			const points = [];
			const steps = 20; // 生成20个中间点，形成更平滑的路线
			
			// 添加起点
			points.push({ latitude: startLat, longitude: startLng });
			
			// 生成中间点（模拟真实道路路线）
			for (let i = 1; i < steps; i++) {
				const ratio = i / steps;
				
				// 添加一些随机偏移，模拟真实道路的弯曲
				const randomOffset = (Math.random() - 0.5) * 0.01; // 最大偏移约1km
				
				const lat = startLat + (endLat - startLat) * ratio + randomOffset;
				const lng = startLng + (endLng - startLng) * ratio + randomOffset;
				
				points.push({ latitude: lat, longitude: lng });
			}
			
			// 添加终点
			points.push({ latitude: endLat, longitude: endLng });
			
			return points;
		},
		
		// 计算车辆当前位置
		calculateVehiclePosition(startLat, startLng, endLat, endLng, status) {
			let progress = 0;
			
			// 根据物流状态确定车辆位置
			switch (status) {
				case 'shipped':
					progress = 0.2; // 刚发货，车辆在起点附近
					break;
				case 'delivering':
					progress = 0.6; // 配送中，车辆在路线中间
					break;
				case 'completed':
					progress = 1.0; // 已完成，车辆到达终点
					break;
				default:
					progress = 0.1;
			}
			
			// 计算车辆位置
			const lat = startLat + (endLat - startLat) * progress;
			const lng = startLng + (endLng - startLng) * progress;
			
			return { latitude: lat, longitude: lng };
		},
		
		// 启动车辆动画
		startVehicleAnimation() {
			if (this.vehicleAnimationTimer) {
				clearInterval(this.vehicleAnimationTimer);
			}
			
			// 每2秒更新一次车辆位置，使动画更流畅
			this.vehicleAnimationTimer = setInterval(() => {
				this.updateVehiclePosition();
			}, 2000);
		},
		
		// 更新车辆位置
		updateVehiclePosition() {
			if (!this.currentRecord || !this.mapMarkers) return;
			
			const startLat = this.currentRecord.senderAddress.latitude;
			const startLng = this.currentRecord.senderAddress.longitude;
			const endLat = this.currentRecord.receiverAddress.latitude;
			const endLng = this.currentRecord.receiverAddress.longitude;
			
			// 找到车辆标记
			const vehicleMarker = this.mapMarkers.find(marker => marker.id === 3);
			if (!vehicleMarker) return;
			
			// 根据物流状态更新车辆位置
			let progress = 0;
			switch (this.currentRecord.status) {
				case 'shipped':
					progress = Math.min(0.4, progress + 0.03); // 缓慢前进
					break;
				case 'delivering':
					progress = Math.min(0.95, progress + 0.04); // 快速前进
					break;
				case 'completed':
					progress = 1.0; // 到达终点
					break;
			}
			
			// 更新车辆坐标
			vehicleMarker.latitude = startLat + (endLat - startLat) * progress;
			vehicleMarker.longitude = startLng + (endLng - startLng) * progress;
			
			// 更新车辆状态文本和图标
			if (progress >= 1.0) {
				vehicleMarker.callout.content = '✅';
				vehicleMarker.callout.bgColor = '#4CAF50';
			} else if (progress > 0.8) {
				vehicleMarker.callout.content = '🚗';
				vehicleMarker.callout.bgColor = '#FF9800';
			} else if (progress > 0.5) {
				vehicleMarker.callout.content = '🚗';
				vehicleMarker.callout.bgColor = '#FF9800';
			} else {
				vehicleMarker.callout.content = '🚗';
				vehicleMarker.callout.bgColor = '#2196F3';
			}
			
			// 强制更新地图
			this.$forceUpdate();
		},
		

		

	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f0f8ff, #e6f3ff);
	padding-bottom: 120rpx;
	padding-top: 0;
	margin: 0;
	position: relative;
}

/* 兑换记录列表 */
.records-section {
	margin: 0 40rpx 30rpx;
	
	.record-item {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		&:first-child {
			margin-top: 80rpx;
		}
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		animation: slideInUp 0.6s ease-out;
		
		&:hover {
			transform: translateY(-6rpx) scale(1.02);
			box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
		}
		
		&:active {
			transform: translateY(-2rpx) scale(0.98);
			transition: all 0.1s ease;
		}
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: linear-gradient(90deg, #66BB6A, #A5D6A7);
		}
		
		.record-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 25rpx;
			
			.item-info {
				display: flex;
				align-items: center;
				gap: 15rpx;
				
				.item-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.status-tag {
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					font-weight: 600;
					transition: all 0.3s ease;
					
					&.shipped {
						background: rgba(33, 150, 243, 0.1);
						color: #2196F3;
						border: 1rpx solid #2196F3;
						
						&:hover {
							background: rgba(33, 150, 243, 0.2);
							transform: scale(1.05);
						}
					}
					
					&.completed {
						background: rgba(76, 175, 80, 0.1);
						color: #4CAF50;
						border: 1rpx solid #4CAF50;
						
						&:hover {
							background: rgba(76, 175, 80, 0.2);
							transform: scale(1.05);
						}
					}
					
					&.delivering {
						background: rgba(255, 193, 7, 0.1);
						color: #FFC107;
						border: 1rpx solid #FFC107;
						
						&:hover {
							background: rgba(255, 193, 7, 0.2);
							transform: scale(1.05);
						}
					}
				}
			}
			
			.status-icon {
				font-size: 40rpx;
				transition: all 0.3s ease;
				animation: iconFloat 2s ease-in-out infinite;
				
				&:hover {
					transform: scale(1.2) rotate(5deg);
				}
			}
		}
		
		.record-details {
			margin-bottom: 25rpx;
			
			.detail-row {
				margin-bottom: 15rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.detail-item {
					display: flex;
					align-items: center;
					gap: 15rpx;
					
					.detail-icon {
						font-size: 28rpx;
						width: 40rpx;
						text-align: center;
					}
					
					.detail-label {
						font-size: 26rpx;
						color: #666;
						min-width: 120rpx;
					}
					
					.detail-value {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						
						&.points {
							color: #FF6B6B;
							font-weight: bold;
						}
						
						&.tracking {
							color: #2196F3;
							font-weight: bold;
						}
					}
				}
			}
		}
		
		.record-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
			border-top: 1rpx solid #f5f5f5;
			
			.status-message {
				display: flex;
				align-items: center;
				gap: 10rpx;
				
				.message-icon {
					font-size: 24rpx;
					opacity: 0.7;
				}
				
				.message-text {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.logistics-btn {
				padding: 12rpx 24rpx;
				background: #2196F3;
				color: white;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
				
				&:hover {
					background: #1976D2;
					transform: translateY(-2rpx) scale(1.05);
					box-shadow: 0 8rpx 20rpx rgba(33, 150, 243, 0.4);
				}
				
				&:active {
					transform: translateY(0) scale(0.98);
					transition: all 0.1s ease;
				}
			}
		}
	}
}

/* 空状态提示 */
.empty-state {
	text-align: center;
	padding: 120rpx 40rpx;
	animation: fadeInUp 0.8s ease-out;
	
	.empty-icon {
		font-size: 120rpx;
		display: block;
		margin-bottom: 30rpx;
		opacity: 0.5;
		animation: bounce 2s ease-in-out infinite;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
		font-weight: 500;
	}
	
	.empty-desc {
		font-size: 26rpx;
		color: #999;
		display: block;
	}
}

/* 物流弹窗样式 */
.logistics-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease-out;
	
	.modal-content {
		background: white;
		border-radius: 20rpx;
		width: 90%;
		max-width: 700rpx;
		max-height: 90vh;
		overflow-y: auto;
		position: relative;
		animation: slideInUp 0.3s ease-out;
		
		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
			
			.close-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				color: #666;
				cursor: pointer;
				transition: all 0.3s ease;
				
				&:hover {
					background: #e0e0e0;
					transform: scale(1.1);
				}
			}
		}
		
		.express-info {
			padding: 20rpx 30rpx;
			background: #f8f9fa;
			
			.tracking-number, .express-company {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				
				.label {
					font-size: 26rpx;
					color: #666;
					min-width: 120rpx;
				}
				
				.value {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
		
		.map-section {
			padding: 20rpx 30rpx;
			
			.map-container {
				height: 400rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				position: relative;
				overflow: hidden;
				
				.real-map {
					width: 100%;
					height: 100%;
				}

				.map-overlay {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					background: rgba(0, 0, 0, 0.8);
					color: white;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					font-size: 22rpx;
					z-index: 10;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
					backdrop-filter: blur(10rpx);
					
					.route-info {
						display: flex;
						flex-direction: column;
						gap: 8rpx;
						
						.route-distance, .route-time {
							display: flex;
							align-items: center;
							gap: 8rpx;
							font-weight: 500;
						}
						
						.route-distance {
							color: #64B5F6;
						}
						
						.route-time {
							color: #FFB74D;
						}
					}
				}

				.map-controls {
					position: absolute;
					bottom: 20rpx;
					left: 20rpx;
					display: flex;
					flex-direction: column;
					gap: 12rpx;
					z-index: 10;
				}

				.control-btn {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.95);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #333;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
					transition: all 0.3s ease;
					backdrop-filter: blur(10rpx);
					border: 1rpx solid rgba(255, 255, 255, 0.2);

					&:hover {
						transform: scale(1.1);
						box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
					}

					&:active {
						transform: scale(0.95);
					}
					
					.control-icon {
						transition: all 0.3s ease;
					}
				}
			}
		}
		
		.logistics-info {
			padding: 20rpx 30rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.logistics-timeline {
				.timeline-item {
					display: flex;
					align-items: flex-start;
					margin-bottom: 25rpx;
					position: relative;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					&:not(:last-child)::after {
						content: '';
						position: absolute;
						left: 15rpx;
						top: 40rpx;
						bottom: -25rpx;
						width: 2rpx;
						background: #e0e0e0;
					}
					
					&.active {
						.timeline-dot {
							background: #2196F3;
							border-color: #2196F3;
						}
						
						.timeline-content {
							.timeline-time, .timeline-desc, .timeline-location {
								color: #2196F3;
								font-weight: 600;
							}
						}
					}
					
					.timeline-dot {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background: #e0e0e0;
						border: 3rpx solid white;
						box-shadow: 0 0 0 2rpx #e0e0e0;
						margin-right: 20rpx;
						margin-top: 8rpx;
						flex-shrink: 0;
						transition: all 0.3s ease;
					}
					
					.timeline-content {
						flex: 1;
						
						.timeline-time {
							font-size: 24rpx;
							color: #999;
							display: block;
							margin-bottom: 8rpx;
						}
						
						.timeline-desc {
							font-size: 28rpx;
							color: #333;
							display: block;
							margin-bottom: 6rpx;
							font-weight: 500;
						}
						
						.timeline-location {
							font-size: 24rpx;
							color: #666;
							display: block;
						}
					}
				}
			}
		}
		
		.address-info {
			padding: 20rpx 30rpx;
			background: #f8f9fa;
			border-radius: 0 0 20rpx 20rpx;
			
			.address-item {
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.address-header {
					display: flex;
					align-items: center;
					gap: 10rpx;
					margin-bottom: 10rpx;
					
					.address-icon {
						font-size: 28rpx;
					}
					
					.address-title {
						font-size: 26rpx;
						color: #333;
						font-weight: 600;
					}
				}
				
				.address-detail {
					font-size: 24rpx;
					color: #666;
					line-height: 1.5;
					padding-left: 38rpx;
				}
			}
		}
	}
}

/* 动画关键帧 */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes iconFloat {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4rpx);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10rpx);
	}
	60% {
		transform: translateY(-5rpx);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes vehicleMove {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(20rpx);
	}
}

@keyframes vehicleBounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8rpx);
	}
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.records-section {
		margin: 20rpx 20rpx;
		
		.record-item {
			padding: 25rpx;
			
			.record-header {
				.item-info {
					.item-name {
						font-size: 28rpx;
					}
				}
			}
			
			.record-details {
				.detail-row {
					.detail-item {
						.detail-label {
							min-width: 100rpx;
						}
					}
				}
			}
		}
	}
	
	.logistics-modal {
		.modal-content {
			width: 95%;
			
			.map-section {
				.map-container {
					height: 300rpx;
				}
			}
		}
	}
}
</style>